<template>
    <div class="ReportedList">
        <!-- <div class="sort">
            <van-dropdown-menu active-color="#1989fa" :close-on-click-overlay="false" :close-on-click-outside="false">
                <van-dropdown-item v-model="searchData.appraiseLevel" @change="getchaXun()" title="安全鉴定或评定"
                    :options="Enum.JDDJ" />
                <van-dropdown-item title="行政区划" ref="item" @closed="getchaXun()">
                    <van-cascader active-color="#1989fa" v-model="searchData.cityCode" :closeable="false"
                        :show-header="false" :options="options" :props="{ checkStrictly: true }" @change="onChange"
                        @finish="onFinish" />
                </van-dropdown-item>
            </van-dropdown-menu>
        </div> -->
        <div style="width: 100%;height: 100%;" v-if="showList">
            <van-tabs v-model="activeName">
                <van-tab title="风险清单" :name='0'/>
                <van-tab title="处置情况" :name='1'/>
                <van-tab title="详情" :name='2'/>
            </van-tabs>
            <div style="padding: 6px 10px;overflow: auto;height:calc(100% - 80px)">
                <div style="margin-top: 10px" v-if="activeName!=2">
                    <van-search v-model="searchData.taskName" style="border-radius: 10px; height: 44px" background="#f7f8fa"
                        placeholder="请输入风险名称" @search="getchaXun" />
                </div>
                <template v-if="activeName == 0">
                    <div class="ReportedList-middle1" v-show="tableData.length > 0" ref="DangerousWarnMiddle1">
                    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="load">
                        <van-cell v-for="(item, index) in tableData" :key="index" style="border-radius: 10px;margin-top: 14px;position: relative;overflow: hidden;">
                            <div class="listItem" data-type="0">
                                <ul class="ReportedList-middle" @touchstart.capture="touchStart" @touchend.capture="touchEnd">
                                    <li class="ReportedList-middle2">
                                    {{ item.taskName }}
                                    </li>
                                    <li class="ReportedList-middle3">
                                        风险编号：{{ item.taskNo }}
                                        <span style="float: right;">风险等级：{{ item.riskLevel | inUseName(Enum.FXDJ) }} </span>
                                    </li>
                                    <li class="ReportedList-middle3 active" @click="tableData1 = [];secondDetail(item, null)">
                                        受影响农房数量：{{ item.houseNum }}
                                    </li>
                                    <li class="ReportedList-middle4 active">
                                    <span @click="tableData1 = [];secondDetail(item, 0)"> 未处置： {{ (item.houseNum - item.dealFinishNum) > 0 ? item.houseNum - item.dealFinishNum : 0 }} </span>
                                    <span @click="tableData1 = [];secondDetail(item, 1)" style="float: right;">已处置：{{ item.dealFinishNum }} </span>
                                    </li>
                                    <li class="ReportedList-middle4">
                                        应转移人员： {{ item.shouldRemovePeople }}
                                        <span style="float: right;">已转移人员：{{ item.alreadyRemovePeople }} </span>
                                    </li>
                                </ul>
                                <div class="delete" :data-index="index" @click="deleteInfo(item)">
                                    <van-button block type="info" @click="detail2(item)">风险详情</van-button>
                                    <br/>
                                    <van-button block type="info" @click="tableData1 = [];secondDetail(item)">处置情况</van-button>
                                </div>
                            </div>
                        </van-cell>
                    </van-list>
                    </div>
                    <div v-show="tableData.length == 0" style="text-align: center; padding-top: 20vh;height: 91vh;">
                        <div style="margin-bottom: 10px">
                            <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/DSF/50.png" />
                        </div>
                        <div>暂无数据</div>
                    </div>
                </template>
                <template v-if="activeName == 1">
                    <div class="ReportedList-middle1" v-show="tableData1.length > 0" ref="DangerousWarnMiddle1">
                    <van-list v-model="loading1" :finished="finished1" finished-text="没有更多了" @load="load1">
                        <van-cell v-for="(item, index) in tableData1" @click="tableData2 = [];getDetail(scope.row)" :key="index" style="border-radius: 10px;margin-top: 14px;">
                            <ul class="ReportedList-middle">
                                <li class="ReportedList-middle2">
                                    <div @click.stop="stopPropagation($event)">
                                        {{ item.cityName }}
                                    </div>
                                </li>
                                <li class="ReportedList-middle3">
                                    风险发布时间：{{ item.createDate }}
                                </li>
                                <li class="ReportedList-middle4 active">
                                    <span @click="tableData2 = [];getDetail(item, null)">受影响农房数量：{{ item.houseNum }}</span>
                                </li>
                                <li class="ReportedList-middle4 active">
                                    <span @click="tableData2 = [];getDetail(item, 0)">未处置： {{ (item.houseNum - item.dealFinishNum) > 0 ? item.houseNum - item.dealFinishNum : 0 }}</span>
                                    <span style="float: right;" @click="tableData2 = [];getDetail(item, 1)">已处置：{{ item.dealFinishNum }} </span>
                                </li>
                                <li class="ReportedList-middle4">
                                    应转移人员：{{ item.shouldRemovePeople }}
                                    <span style="float: right;">已转移人员：{{ item.alreadyRemovePeople }}</span>
                                </li>
                            </ul>
                        </van-cell>
                    </van-list>
                    </div>
                    <div v-show="tableData1.length == 0" style="text-align: center; padding-top: 20vh;height: 91vh;">
                        <div style="margin-bottom: 10px">
                            <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/DSF/50.png" />
                        </div>
                        <div>暂无数据</div>
                    </div>
                </template>
                <template v-if="activeName == 2">
                    <div class="ReportedList-middle1" v-show="tableData2.length > 0" ref="DangerousWarnMiddle1">
                    <van-list v-model="loading2" :finished="finished2" finished-text="没有更多了" @load="load2">
                        <van-cell v-for="(item, index) in tableData2" :key="index" @click="detail(item)"
                            style="border-radius: 10px;margin-top: 14px;">
                            <ul class="ReportedList-middle">
                                <li class="ReportedListDetail-middle2">
                                    {{ item.householderName }}
                                    <span style="float: right;">风险等级：{{ item.riskLevel | inUseName(Enum.FXDJ) }} </span>
                                </li>
                                <li class="ReportedList-middle3">
                                    风险名称：{{ item.taskName }}
                                </li>
                                <li class="ReportedList-middle3">
                                    风险发布时间：{{ item.createDate }}
                                </li>
                                <li class="ReportedList-middle4">
                                    风险上报截止时间：{{ item.deadlineTime }}
                                </li>
                                <li class="ReportedList-middle4">
                                    <img width="10"
                                        src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/dingwei.png" />
                                    {{ item.adress ? item.adress : '无' }}
                                </li>
                            </ul>
                        </van-cell>
                    </van-list>
                    </div>
                    <div v-show="tableData2.length == 0" style="text-align: center; padding-top: 20vh;height: 91vh;">
                        <div style="margin-bottom: 10px">
                            <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/DSF/50.png" />
                        </div>
                        <div>暂无数据</div>
                    </div>
                </template>
            </div>
        </div>
        <div style="width:100%;height: 100vh;overflow: auto;background: #ffffff;" v-else>
            <template v-if="status == '风险发布详情'">
                <p style="margin:10px">
                    <el-button @click="backHomepage" size="mini" type="primary">返回上一级</el-button>
                </p>
                <p class="title">风险发布管理</p>
                <risk-release-add ref="RiskReleaseAdd" :rowData="rowDataFx" :disabled="disabled"></risk-release-add>
            </template>
            <template v-else>
                <business-process-add :rowData=rowData :readonly=disabled></business-process-add>
            </template>
        </div>
    </div>
</template>
<script>
import axios from "axios";
import dd from 'gdt-jsapi';
import BusinessProcessAdd from './BusinessProcessAdd.vue'
import RiskReleaseAdd from './RiskReleaseAdd.vue'
export default {
    name: "ReportedList",
    data() {
        return {
            BaseUrl: window.g.BaseURL,
            activeName: 0,
            status: "",
            showList: true,
            disabled: true,
            rowData: {},
            Enum: {
                FXDJ: [
                    {
                        text: 'Ⅰ级',
                        value: 0
                    },
                    {
                        text: 'Ⅱ级',
                        value: 1
                    },
                    {
                        text: 'Ⅲ级',
                        value: 2
                    },
                    {
                        text: 'Ⅳ级',
                        value: 3
                    },
                    {
                        text: 'Ⅴ级',
                        value: 4
                    }
                ],
                JDDJ: [
                    {
                        text: '全部',
                        value: null
                    },
                    {
                        text: 'A级',
                        value: 0
                    },
                    {
                        text: 'B级',
                        value: 1
                    },
                    {
                        text: 'C级',
                        value: 2
                    },
                    {
                        text: 'D级',
                        value: 3
                    }
                ],
            },
            cityCode: window.localStorage.getItem("citycode"),
            options: [],
            searchData: {
               taskName: '',
               taskNo: '',
            },
            startX: 0, //触摸位置
            endX: 0, //结束位置
            moveX: 0, //滑动时的位置
            disX: 0, //移动距离
            deleteSlider: '', //滑动时的效果,使用v-bind:style="deleteSlider",
            multipleSelection: [],
            firstRow: {},
            firstStatus: "",
            rowDataFx:{},
            loading: false,
            finished: false,
            loading1: false,
            finished1: false,
            loading2: false,
            finished2: false,
            tableData: [],
            tableData1: [],
            tableData2: [],
            pageSize: 15,
            totalCount: 0,
            pageNum: 1,
            totalCount1: 0,
            pageNum1: 1,
            totalCount2: 0,
            pageNum2: 1,
        }
    },
    filters: {
        inUseName: function (msg, data) {
            let name = ''
            data.forEach(item => {
                if (item.value == msg) {
                    name = item.text
                }
            })
            return name
        },
    },
    components: {
        BusinessProcessAdd,
        RiskReleaseAdd
    },
    mounted() {
        dd.ready(() => {
            dd.setTitle({
                title: '风险' + this.$route.query.name,
            }).then((res) => {

            }).catch((err) => {
                console.error(err)
            })
        })
        // this.options.push({
        //     value: this.cityCode,
        //     text: '全部',
        //     selected: true,
        //     children: null
        // })
        // this.getCitesData(this.cityCode, this.options)
        this.getData()
    },
    methods: {
        //返回
        backHomepage() {
            this.showList = true
        },
        //详情信息
        detail(row) {
            this.status = '';
            this.$set(row, 'riskDealComments', row.riskDealComments)
            this.rowData = [row];
            setTimeout(() => {
                this.showList = false
            }, 500)
        },
        //风险发布详情信息
        detail2:async function(row) {
            this.status = '风险发布详情';
            let webResult = await axios.get(`${this.BaseUrl}/api/farmerHouse/housePreventTaskInfo/get/${row.taskNo}`, {}, {
                headers: {
                    isOutParam: true,
                },
            });
            if(webResult.data.data){
                this.rowDataFx = webResult.data.data;
            } else {
                this.rowDataFx =row;
            }
            this.showList = false
           
        },
        // 滑动开始
        touchStart(e) {
            // 记录初始位置
            this.startX = e.touches[0].clientX
        },
        // 滑动结束
        touchEnd(e) {
            // 当前滑动的父级元素
            let parentElement = e.currentTarget.parentElement
            // 记录结束位置
            this.endX = e.changedTouches[0].clientX
            // 左滑
            if (parentElement.dataset.type == 0 && this.startX - this.endX > 100) {
                this.restSlide()
                parentElement.dataset.type = 1
            }
            // 右滑
            if (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
                this.restSlide()
                parentElement.dataset.type = 0
            }
            this.startX = 0
            this.endX = 0
        },
        // 复位滑块
        restSlide() {
            let listItems = document.querySelectorAll('.listItem')
            for (let i = 0; i < listItems.length; i++) {
                // 复位
                listItems[i].dataset.type = 0
            }
        },

        // 判断当前是否有滑块处于滑动状态
        checkSlide() {
            let listItems = document.querySelectorAll('.listItem')
            for (let i = 0; i < listItems.length; i++) {
                if (listItems[i].dataset.type == 1) {
                    return true
                }
            }
            return false
        },
        //查询
        getchaXun() {
           this.pageNum = 1;
           this.pageNum1 = 1;
           this.pageNum2 = 1;
            if (this.activeName == 0) {
                this.tableData = [];
                this.getData()
            } else if (this.activeName == 1) {
                this.tableData1 = [];
                this.secondDetail(this.firstRow, this.firstStatus)
            } else if (this.activeName == 2) {
                this.tableData2 = [];
                this.getDetail(this.firstRow, this.firstStatus)
            }
        },
        load() {
            this.pageNum++;
            this.getData()
        },
        load1() {
            this.pageNum1++;
            this.secondDetail(this.firstRow, this.firstStatus)
        },
        load2() {
            this.pageNum2++;
            this.getDetail(this.firstRow, this.firstStatus)
        },
        // 查询
        getData: async function () {
            this.activeName = 0;
            axios.get(
                `${this.BaseUrl}api/farmerHouse/housePreventRiskReport/list`, {
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    cityCode: window.localStorage.getItem("citycode"),
                    taskName: this.searchData.taskName,
                }
            }, {
                headers: {
                    "isOutParam": true,
                    "isOutParamS": true
                }
            }).then(res => {
                this.loading = false;
                if (res.data.code == 200) {
                    res.data.data.pageList.forEach(item => {
                        this.$set(item, 'checked', false)
                        this.tableData.push(item)
                    })
                    this.totalCount = res.data.data.totalCount;
                    // 数据全部加载完成
                    if (this.tableData.length >= this.totalCount) {
                        this.finished = true;
                    }
                } else {
                    this.$toast.fail(res.data.data.msg)
                }
            })
        },
        // 查询  处置情况数据
        secondDetail: async function (row, dealStatus) {
            this.activeName = 1;
            this.firstRow = row;
            this.firstStatus = dealStatus;
            let url = `${this.BaseUrl}/api/farmerHouse/housePreventTaskSign/deallist?pageNum=${this.pageNum1}&pageSize=${this.pageSize}&taskName=${this.searchData.taskName}`
            dealStatus!=null ? url += `&dealStatus=${dealStatus}` : "";
            row && row.taskNo ? url += `&taskNo=${row.taskNo}&cityCode=${row.cityCode}` : url += `&taskNo=${this.searchData.taskNo}&cityCode=${localStorage.getItem("citycode")}`;
            axios.post(url, {}, {
                headers: {
                    "isOutParam": true,
                    "isOutParamS": true
                }
            }).then(res => {
                res.data.data.pageList.forEach(item => {
                    this.tableData1.push(item)
                })
                this.totalCount1 = res.data.data.totalCount;
                // 数据全部加载完成
                if (this.tableData1.length >= this.totalCount1) {
                    this.finished1 = true;
                }
            })
        },
        // 查询  查询列表数据
        getDetail: async function (row, dealStatus) {
            this.activeName = 2
            this.firstRow = row;
            this.firstStatus = dealStatus;
            let url = `${this.BaseUrl}/api/farmerHouse/housePreventTaskSign/dealDetal?pageNum=${this.pageNum2}&pageSize=${this.pageSize}`
            dealStatus!=null ? url += `&dealStatus=${dealStatus}` : "";
            row && row.taskNo ? url += `&taskNo=${row.taskNo}&cityCode=${row.cityCode}` :  url += `&taskNo=${this.searchData.taskNo}&cityCode=${localStorage.getItem("citycode")}`;
            this.loading = true
            axios.post(url, {}, {
                headers: {
                    "isOutParam": true,
                    "isOutParamS": true
                }
            }).then(res => {
                res.data.data.pageList.forEach(item => {
                    this.tableData2.push(item)
                })
                this.totalCount2 = res.data.data.totalCount;
                // 数据全部加载完成
                if (this.tableData2.length >= this.totalCount2) {
                    this.finished2 = true;
                }
            })
        },
        // 点击复选框阻止冒泡
        stopPropagation(e) {
            e.stopPropagation();
        },
        onChange({ value, selectedOptions }) {
            if ( selectedOptions[selectedOptions.length-1].children.length > 0) {

            } else {
                this.getCitesData(value,  selectedOptions[selectedOptions.length-1].children)
            }

        },

    },
    beforeDestroy() { }
}
</script>
<style lang="scss" scoped>
.ReportedList {
    height: 100vh;
    background: #eee;
    width: 100vw;
    font-family: 黑体;
    font-size: 18px;

    .title {
        width: 100%;
        height: 46px;
        text-align: center;
        color: #000;
        font-weight: bold;
        font-size: 20px;
    }

    .delete {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 0;
      right: -88px;
    }
    .ReportedList-footer {
        width: 99%;
        margin-top: 4px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;

        .van-button {
            width: 47%;
        }
    }

    .ReportedList-middle1 {
        height: 91vh;
        overflow: auto;
        .listItem{
            // 左滑动画效果
            -webkit-transition: all 0.2s;
            transition: all 0.2s;
            text-align: left;
        }
        // 左滑动画效果
        .listItem[data-type='0'] {
            transform: translate3d(0, 0, 0);
        }
        .listItem[data-type='1'] {
            transform: translate3d(-88px, 0, 0);
        }
        .listItem:after {
            -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            z-index: 2;
        }
        
        .active {
            color: #0272D4!important;
            cursor: pointer;
        }
        .ReportedList-middle {
            background-color: #fff;
            width: 98%;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            position: relative;
            .ReportedList-middle2 {
                font-size: 18px;
                font-weight: 1000;
                color: black;
                line-height: 4.615vh;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .ReportedList-middle3 {
                font-size: 14px;
                color: #aaa;
                line-height: 24px;
                clear: both;
                overflow: hidden;
            }

            .ReportedList-middle4 {
                font-size: 14px;
                color: #aaa;
                line-height: 24px;
            }
        }
    }
}
</style>
<style>
.ReportedList-middle2 .van-checkbox__label {
    line-height: normal !important;
}
</style>
